<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>注册账号-手机号</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{#fff}
			.mui-bar-nav{background:#fff;color: #000;}
			.mui-bar-nav .mui-icon-left-nav{color:#000}
			.mui-bar-nav>.back{color:#000;margin-top: .04rem;}
			.mui-content{padding-top:0 !important;width: 100%;height: 100%;position: absolute;/*top: 0.9rem;*/left: 0;background: #fff;}
			.mui-content .title{text-align: center;position: relative;top: 0.3rem;font-size: 0.36rem;color: #333333;}
			.mui-content .input_box{width: 100%;height: 1.82rem;margin: 0;padding: 0;position: absolute;top: 1.66rem;}
			.mui-content .input_box li{width: 100%;height: 0.91rem;border-bottom: 1px solid #eeeeee;padding-left:1.4rem ;box-sizing: border-box;}
			.mui-content .input_box input{width: 100%;height: 100%;border: none;padding: 0;margin: 0;font-size:0.26rem;}
			.mui-content .input_box input::-webkit-input-placeholder {font-size:0.26rem;color: #cccccc;} 
			.mui-content .input_box li:first-child{background: url(../../images/menu/phone.png) no-repeat center;background-position-x:0.75rem;background-size:0.25rem;}
			.mui-content .input_box li:last-child{background: url(../../images/menu/keycode.png) no-repeat center;background-position-x:0.75rem;background-size:0.38rem;}
			.mui-content .input_box li .keycode{width: 1.85rem !important;height: 0.58rem !important;font-size: 0.24rem !important;color: #fff !important;position: absolute !important;top: 1.06rem !important;right: 0.4rem !important;}
			.mui-content .input_box li .timing{display: none;background-color: #ccc;border:1px solid #ccc;}
			.mui-content .info{color: #666666;width: 100%;height: 0.38rem;font-size: 0.24rem;position: absolute;top: 4.72rem;padding-left: 0.86rem;}
			.next{width: 6rem;height: 0.68rem;background: #117afd;font-size: 0.3rem;color: #fff;border: none;outline: none;position: absolute !important;top:5.31rem  !important;left: 0.75rem !important;border-radius: 0.1rem;}
		</style>
	</head>
	<body>
		<!--<div class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="back">返回</a>
		</div>-->
		<div class="mui-content">
			<div class="title">注册账号</div>
			<ul class="input_box">
				<li><input type="text" id="phone" placeholder="请输入11位手机号码"/></li>
				<li><input type="text" id="confirm" placeholder="请输入验证码" />
					<button id="sendCode" class="keycode mui-btn mui-btn-primary">发送验证码</button>
					<span class="timing keycode mui-btn mui-btn-primary">60s</span>
				</li>
			</ul>
			<div class="info">注册即使为同意<a id="xieyi">《政务服务网用户注册协议》</a></div>
			<button class="next mui-btn mui-btn-primary">下一步</button>
		</div>
	</body>
	<script>
		function my_immersed(immersed){
			
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js" ></script>
	<script>
		var checkCode = '';
		var phoneNum = null;
		document.getElementById('sendCode').addEventListener('tap',function(){
			var phone = document.getElementById('phone').value;
			checkPhoneNum(phone,function(info){
				if (info === true) {//手机号可用
					//发送验证码
					utils.ajax('appHttpService/appSendPhone.do',function(data){
						var data = JSON.parse(data);
						if(data.code == '0') {//成功
							mui.toast('验证码已发送, 请注意查收！');
							checkCode = data.result;
							if(data.zdht != undefined && data.zdht == '0'){
								document.getElementById('confirm').value = data.result;
							}
						} else {
							mui.toast(data.result);
						}
					},"netUserPhone="+phone,null,function(){
						mui.toast('抱歉，当前服务不可用，请稍后再试！');
					});
					//显示倒计时
					timing();
					
					phoneNum = phone;
				} else {//已注册的手机号
					var param = {};
					param.login = info.userLogin;
					param.phone = phone;
					param.idVerifyStatus = info.idVerifyStatus;
					localStorage.setItem('lxrName',info.lxrName);
					param.lxrCardno = info.lxrCardno;
					showTemplates('register4.html','注册','_www/src/login/register4.html?'+jsonToParams(param,true));
				}
			})
		})
		
		/**
		 * 验证手机号 是否被使用
		 * @param {Object} phone
		 * @param {Object} callback
		 */
		function checkPhoneNum(phone,callback){
			var mobileReg = /^\d{11}$/;
			if(mobileReg.test(phone)){
				var para = 'netUserPhone='+phone;
				var url = "appHttpService/appCheckPhone.do";
				var config = {
					'timeout': 2000,
				};
				utils.ajax(url,function(data){
					data = eval("(" + data + ")");
					if (data.code == 0 || data.code == '0' ) {
						callback(true);
					}else{
						callback(data.netUser);
					}
				},para,config,function(){
					mui.toast('验证手机号异常');
					return false;
				})
			}else{
				mui.toast('请输入正确的手机号');
				return false;
			}
		}
		
		document.querySelector('.next').addEventListener('tap',function(){
			var phone = document.getElementById('phone').value;
			var confirmNum = document.getElementById('confirm').value;
			if (phone == '' || phone == undefined) {
				mui.toast('手机号不能为空');
				return;
			}
			if(!confirmNum||confirmNum.trim()==''){
				mui.toast('验证码不能为空');
				return;
			}
			if (phoneNum != null&&phone != phoneNum) {
				mui.toast('手机号不一致，如果用当前手机号，请重新获取验证码');
				return;
			}
			
			if (confirmNum != checkCode) {
				mui.toast('验证码不正确！');
				return;
			}
			location.href = 'register2.html?phone='+phone;
			//var url = '_www/src/login/register2.html?phone='+phone;
			//showTemplates('register2.html','设置密码',url);
		});
		//注册协议
		document.getElementById('xieyi').addEventListener('tap',function(){
			showTemplates('xieyi.html','用户注册协议','_www/src/login/xieyi.html')
		})
		//倒计时
		function timing(){
			var keycode = document.querySelector('.keycode');
			var timing = document.querySelector('.timing');
			keycode.style.display = 'none';
			timing.style.display = 'block';
			var i = 60;
			var index = setInterval(function(){
				if (i > 0) {
					timing.innerHTML = --i + 's';
				} else {
					timing.innerHTML = '60s';
					keycode.style.display = 'block';
					timing.style.display = 'none';
					clearInterval(index);
				}
			},1000);
		}
	</script>
</html>